Las páginas web se trabajan con lo que se conoce como un esquema (outline). Esto es un índice de
los apartados de una página web que muestra la relación de jerarquía entre los diferentes apartados y
subapartados. El concepto de esquema se formalizó en HTML 5 con más precisión que en HTML 4 / XHTML 1 y explica
algunas características y formas de utilización de etiquetas de secciones y bloques de contenido.
Se pensó que las páginas de HTML se pueden dividir en secciones y en HTML 5 se introdujo una serie de etiquetas
para dividir nuestra página en secciones, y dentro de cada sección habrá más etiquetas para que podamos tener un
índice de los apartados de la página web.
La página dividida con sus distintas etiquetas se ve así:
ETIQUETAS:
<section>: se utiliza para representar una sección "general" dentro de un documento o aplicación, como
un capítulo de un libro. Puede contener subscciones y si lo acompañamos de h1-h6 podemos estructurar mejor
la página creando jerarquías de contenido, algo muy favorable para el posicionamiento web.
<article>: representa un componente de una página que consiste en una composición autónoma en un
documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido.
<aside>: es una sección de la página que abarca un contenido relacionado con el contenido que lo
rodea, por lo que puede considerarse un contenido independiente. Por ej: barras laterales, efectos
tipográficos, elementos publicitarios, etc.
<header>: representa un grupo de artículos introductorios o de navegación. Está destinado a contener
por lo general la cabecera de la sección (un h1-h6 o hgroup)
<nav>: representa una sección de una página que enlaza a otras páginas o a otras partes dentro de la
página.
<footer>: representa el pie de una sección, con información como el autor, el copyright o el año.
<hgroup>: se utiliza para agrupar un conjunto de elementos h1-h6 cuando el título tienen varios
niveles.
ETIQUETAS EXTRAS:
ETIQUETA DIV
Es la etiqueta de división. Se utiliza para hacer divisiones de contenido en la página web como texto,
imágenes, encabezado, pie de página, barra de navegación, etc. Es obligatorio cerrar la etiqueta.
Es una etiqueta de nivel de bloque
Es una etiqueta de contenedor genérica
Se usa para agrupar varias etiquetas de HTML para que se puedan crear secciones y aplicarles estilos en
conjunto.
ETIQUETA SPAN
Es un contenedor en línea genérico para elementos y contenido en línea. Se usa para agrupar
elementos con el mismo estilo. No realiza ningún cambio visual por sí misma. Es obligatorio cerrarla.
Ejemplo de organización de una página en secciones:
